<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">审批详情</span>
          <el-tag
            :type="statusType"
            size="small"
          >审核中</el-tag>
        </div>
      </template>
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
        <el-button
          type="primary"
          size="small"
          @click="auditOperation"
        >审批</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <el-tabs
        v-model="activeName"
        @tab-click="tabClick"
      >
        <el-tab-pane
          label="流程信息"
          name="1"
        >
          流程信息
        </el-tab-pane>
        <el-tab-pane
          label="审批记录"
          name="2"
        >
          审批记录
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'

export default {
  setup(props, context) {
    const router = useRouter()
    var reactiveData = reactive({
      activeName: '1',
    })
    const back = () => {
      router.back()
    }
    const auditOperation = () => {
      console.log(56456)
    }
    return {
      ...toRefs(reactiveData),
      back,
      auditOperation,
    }
  },
}
</script>

<style>
</style>
